<template>
    <view class="register-container">
        <navigation-header title="资料审核" show-back="true"></navigation-header>
        <view class="register-body-container">
            <view class="register-step-container">
                <register-step step-number="1" step-text="注册" :enable="true"></register-step>
                <image src="@/static/img/register/step.png" class="step"></image>
                <register-step step-number="2" step-text="实名认证" :enable="true"></register-step>
                <image src="@/static/img/register/step.png" class="step"></image>
                <register-step step-number="3" step-text="资料审核" :enable="true"></register-step>
            </view>
            <view class="register-info-container">
                <image src="@/static/img/register/waiting.png"></image>
                <text>资料正在审核中</text>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, watch, computed } from 'vue';
import { getVerificationCode } from '@/api/common/api.js';
import { onLoad } from '@dcloudio/uni-app';
import NavigationHeader from '@/components/NavigationHeader.vue';
import RegisterStep from '@/components/RegisterStep.vue';

onLoad(() => {});
</script>

<style lang="scss" scoped>
@import '@/static/css/common.scss';
.register-container {
    @extend .column-container-layout;
    .register-body-container {
        @extend .column-container-layout;
        justify-content: center;
        align-items: center;
        padding: $scale * 20rpx;
        .register-step-container {
            @extend .row-layout;
            justify-content: space-evenly;
            margin: $scale * 20rpx 0;
            align-items: center;
            .step {
                width: $scale * 55rpx;
                height: $scale * 6rpx;
                align-self: flex-start;
                margin: $scale * 10rpx 0;
            }
        }
        .register-info-container {
            @extend .column-container-layout;
            margin: $scale * 100rpx 0;
            justify-content: flex-start;
            align-items: center;
            image {
                width: $scale * 88rpx;
                height: $scale * 88rpx;
            }
            text {
                font-size: $scale * 18rpx;
                color: #3d3d3d;
                font-weight: bold;
                margin: $scale * 50rpx 0;
            }
            button {
                color: white;
                background-color: #437eff;
                border-radius: $scale * 8rpx;
                width: 100%;
                font-size: $scale * 18rpx;
                margin: $scale * 50rpx 0;
            }
        }
    }
}
</style>
